import React, { useState } from 'react';
import axios from 'axios';
import styles from '../zyd/yd.module.css'; // 替换为你自己的样式模块路径

export default function Dpzx() {
    const [items, setItems] = useState([
        {
            id: 1,
            title: "方案11111",
            editTime: "2025-05-14 13:45:11",
            editAccount: "主账号",
            content: "这是方案的内容",
            image: "/public/六花.jpg",
            status: false
        }
    ]);

    const [selectedItem, setSelectedItem] = useState(null);
    const [newTitle, setNewTitle] = useState('');
    const [newContent, setNewContent] = useState('');
    const [newImage, setNewImage] = useState(null);

    // 复制条目
    const handleCopy = (itemToCopy) => {
        const copiedItem = {
            ...itemToCopy,
            id: Date.now(),
            title: `${itemToCopy.title} - 副本`,
            status: false
        };
        setItems(prev => [...prev, copiedItem]);
    };

    // 进入编辑模式
    const handleEdit = (item) => {
        setSelectedItem(item);
        setNewTitle(item.title);
        setNewContent(item.content);
        setNewImage(item.image || null);
    };

    // 保存编辑
    const handleSaveEdit = () => {
        if (!selectedItem) return;

        const updatedItem = {
            ...selectedItem,
            title: newTitle,
            content: newContent,
            image: newImage
        };

        setItems(prev =>
            prev.map(item => item.id === selectedItem.id ? updatedItem : item)
        );
        setSelectedItem(null);
    };

    // 删除条目
    const handleDelete = (itemId) => {
        setItems(prev => prev.filter(item => item.id !== itemId));
    };

    // 图片上传处理
    const handleImageUpload = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = () => {
            setNewImage(reader.result); // 设置为 base64 图片源
        };
        reader.readAsDataURL(file);
    };

    // 启用操作
    const handleEnable = (itemId) => {
        const isConfirmed = window.confirm("确定要启用此方案吗？");
        if (isConfirmed) {
            setItems(prev =>
                prev.map(item =>
                    item.id === itemId ? { ...item, status: true } : item
                )
            );
        }
    };

    return (
        <div className={styles.dpzxContainer}>
            {/* 左侧导航栏 */}
            <div className={styles.sidebar}>
                <ul>
                    <li className={styles.active}>美国</li>
                    <li>加拿大</li>
                    <li>美国</li>
                    <li>加拿大</li>
                    <li>美国</li>
                    <li>加拿大</li>
                </ul>
            </div>

            {/* 中间内容区域 */}
            <div className={styles.contentArea}>
                {selectedItem ? (
                    <>
                        <h3>编辑方案</h3>
                        <input
                            value={newTitle}
                            onChange={(e) => setNewTitle(e.target.value)}
                            placeholder="标题"
                        />
                        <textarea
                            value={newContent}
                            onChange={(e) => setNewContent(e.target.value)}
                            placeholder="内容"
                        />
                        <input type="file" accept="image/*" onChange={handleImageUpload} />
                        <button onClick={handleSaveEdit}>保存</button>
                    </>
                ) : (
                    items.map((item) => (
                        <div key={item.id} className={styles.contentHeader}>
                            <div className={styles.dpzxa}>
                                <div>
                                    <h3>{item.title}</h3>
                                    <p>编辑时间：{item.editTime}</p>
                                    <p>编辑账号：{item.editAccount}</p>
                                </div>
                                <button className={styles.draftButton}>草稿</button>
                            </div>
                            <div className={styles.contentActions}>
                                <button onClick={() => handleCopy(item)}>复制</button>
                                <button>同步站点</button>
                                <button onClick={() => handleEdit(item)}>编辑</button>
                                <button onClick={() => handleDelete(item.id)}>删除</button>
                                <button onClick={() => handleEnable(item.id)}>
                                    {item.status ? '已启用' : '启用'}
                                </button>
                            </div>
                        </div>
                    ))
                )}
            </div>

            {/* 右侧信息展示区域 */}
            <div className={styles.infoArea}>
                <img src={newImage || '/public/六花.jpg'} alt="MUI" className={styles.infoImage} />
                <div className={styles.infoButtons}>
                    <button>Follow</button>
                    <button>Message</button>
                </div>
                <div className={styles.infoStats}>
                    <p><strong>8</strong> Followers</p>
                    <p><strong>154</strong> Sold</p>
                    <p><strong>779</strong> Items</p>
                </div>
                <div className={styles.infoTabs}>
                    <button>Home</button>
                    <button>Categories</button>
                    <button>About</button>
                </div>
                <div className={styles.uploadStatus}>
                    <p>图片待上传</p>
                    <input type="file" accept="image/*" onChange={handleImageUpload} />
                </div>
            </div>
        </div>
    );
}